<template>
  <div class="HeaderMain">
    <div class="HeaderLeftTilte">
      <img src="../../assets/logo.png">
      <h1>博客家纺后台管理系统</h1>
    </div>
    <div class="HeaderRight">
      <el-dropdown>
  <span class="el-dropdown-link">
    <img class="portrait" :src=headPortrait>
  </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="portatitClick">个人资料</el-dropdown-item>
          <el-dropdown-item>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import portrait from '../../assets/logo.png'

export default {
  name: "index",
  data() {
    return {
      headPortrait: portrait
    }
  },
  methods:{
    portatitClick(){
      this.$router.push('/portarit')
    }
  }
}
</script>

<style scoped lang="scss">
.HeaderMain {
  //background-image: url("../../static/navBj.jpg");
  //background-repeat: no-repeat;
  //background-size: cover;
  //background-position: center;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  height: 100%;

  .HeaderLeftTilte {
    display: flex;

    img {
      border-radius: 10px;
      width: 60px;
      height: 60px;
    }

    h1 {
      padding: 0;
      margin: 0;
      margin-left: 5px;
      //color:#f4df8a ;
    }
  }

  .HeaderRight {
    margin-right: 50px;
    .el-dropdown-link {
      cursor: pointer;
      color: #409EFF;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
    .el-dropdown{
      height: 100% !important;
    }
    display: flex;
    align-items: center;
    height: 100%;
    .portrait {
      margin-top: 5px;
      width: 50px;
      height: 50px;
      border-radius: 50%;

    }
  }
}

</style>